/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../../library/func';
import Icon from '../../../../project/style/icon';

import DoHttp from '../../../../project/func/http/http';

// require('../../../../assets/image/vipruzhutop.png');
// require('../../../../assets/image/chuangyeti.png');
/******************************************************************************************
 * Export Class
 ******************************************************************************************/
export default class Gift extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			list:[],
			set_dist_number:'未正常获取',
			set_tab_val:1,

		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		this.getData();
	}

	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (e)=> {
		
	}
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '入驻推荐',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }
	

	getData(type=""){
		DoHttp.Loading({
			url:'product/list.php',
			data:{
				cid:2,
				sorttype:type,
			},
			success:(res)=>{
				this.setState({
					list:res,
				})
			}
		})

		DoHttp.Loading({
			url:'usercenter/info.php',
			success:(res)=>{
				this.setState({
					set_dist_number:res.set_dist_number,
				})
			}
		})
	}
	 
	//tab选项卡改变颜色  其实是异步取值
	onTabCheck = (val, e)=>{
		this.setState({
			set_tab_val:val,
		})
		let type_str = '';
		switch(val){
			case 1:
				type_str = "";
			break;
			case 2:
				type_str = "sale";
			break;
			case 3:
				type_str = "new";
			break;
			
		}
		this.getData(type_str);
	}

	//复制剪贴板
	copyText = (e) => {

		wx.setClipboardData({
			data: this.state.set_dist_number,
			success: function(res) {
			  wx.getClipboardData({
				success: function(res) {
				  console.log(res.data) // data
				}
			  })
			}
		})		  
	}

	//分享的方法  是个空方法不能使用
	shareOut = (e) => {
		console.log('分享成功')
	}


	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/

	render () {

		let tabti = 
		<CRow bg='white' h='60' mb='20'>
			<CHand class="f1" x="center" y="center" onClick={ this.onTabCheck.bind(this,1) }>
				{ this.state.set_tab_val == 1 ?  
					<CText color="#ce4549" style="border-bottom:solid #ce4549 4rpx" pb='8' mt="4">全部商品</CText>
					 : 
					<CText pb='12' mt="4">全部商品</CText>
				}
			</CHand>

			<CHand class="f02" h="30" w="2" bg="#eee"></CHand>

			<CHand class="f1" x="center" y="center" onClick={ this.onTabCheck.bind(this,2)}>
				{ this.state.set_tab_val == 2 ?  
					<CText color="#ce4549" style="border-bottom:solid #ce4549 4rpx" pb='8' mt="4">销售排序</CText>
					 : 
					<CText pb='12' mt="4">销售排序</CText>
				}
			</CHand>

			<CHand class="f02" h="30" w="2" bg="#eee"></CHand>


			<CHand class="f1" x="center" y="center" onClick={ this.onTabCheck.bind(this,3)}>
				{ this.state.set_tab_val == 3 ?  
					<CText color="#ce4549" style="border-bottom:solid #ce4549 4rpx" pb='8' mt="4">最新上架</CText>
					 : 
					<CText pb='12' mt="4">最新上架</CText>
				}			
			</CHand>

		</CRow>;

		return (
			<CPage>
				<CContent mb='160'>
					{/* 邀请码和复制按钮 */}


					{/* 顶部权益介绍图 */}
					<CRow bg='#fff'>
						<image style="width:100%; height:750rpx" src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/vipruzhutop.png"></image>
					</CRow>

					{/* 邀请码和复制按钮 */}
					<CRow bg='#fff' x="center" h="140" mt="-140">
						<text style="color:#BA7F35; font-size:28rpx; font-weight:800; ">邀请码：{ this.state.set_dist_number }</text>
						<CHand onClick={ this.copyText.bind(this) } ml="30" px="30" ra="40" bg="#BA7F35" size="28" color="#fff">复制</CHand>
					</CRow>

					<CHand style="position: absolute; top:20rpx; right:-22rpx; opacity:0.7" onClick={ this.copyText.bind(this) }  px="30" py="9" ra="40" bg="#000" size="28" color="#fff">分享专区</CHand>



					{/* 中间图片标题 */}
					<CRow bg='white' x="'center">
						<image style="width:90%; height:115rpx" src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/chuangyeti.png"></image>
					</CRow>

					{/* 过滤tab标题 */}
					{tabti}
					
					{/* 商品列表单元 */}
					<CColumn>


					{this.state.list.map((item, key) =>{

						return(
							<CItemX class="vip_proc_imgp" bg="#fff" mx="20" y="center" style="width:100%" mt="10">
								<CImage mode='aspectFit' src='http://image.cdn.hesq.com.cn/rushbuy/product/{{item.object.set_image_small}}'></CImage>
								<CColumn h='275' py="20" bb='2 solid #eee' bg='#fff'>
									<CLine y="top" style="overflow:hidden; font-size:36rpx; font-weight:500; line-height:40rpx; height:80rpx">{item.set_name}</CLine>
									<CLine size="14">
										<CHand size='24' color="#e73233"></CHand>
									</CLine>
	
									<CLine size="14" mt='64' mb='30'>
										<CBetween>
											<text style="font-size:50rpx; font-weight:800; color:#C6985B">￥{item.set_price}</text>
											<CHand color="#fff" bg="#e73233" ra="60" size="28" px="50" py="8"
												//分享的方法  还没有研究  空方法
												onClick={this.shareOut.bind(this)}
											>分享</CHand>
										</CBetween>
									</CLine>
								</CColumn>
							</CItemX>

						);

					})}

					</CColumn>

				</CContent>
				{/* 商品列表单元end */}

				<CFooter h="160" y="center">
					<CHand style=" width:96%; height:80rpx; line-height:80rpx; margin-left:2%;" onClick={ this.copyText.bind(this) } x="center" ra="80" bg="#DEAF6B" size="32" bold color="#52310a">立即邀请好友</CHand>
				</CFooter>
			</CPage>
		)
	}
}


